<template>
  <div >
    <view>
      <van-dialog id="van-dialog" />
      <van-toast id="van-toast" />

      <div class="tooslbtns" v-if="isToolsShow" style="text-align: right; padding-right: 42rpx; border-bottom: 1px solid #ccc;padding-bottom: 20rpx" >
        <van-button type="info" :disabled="showPerv" size="small" @tap="getPervPage" >《</van-button>
        <van-button type="info" :disabled="showNext"  size="small" @tap="getNextPage" >》</van-button>

        <van-button type="info"  size="small" @tap="ToolsShow" >批处理</van-button>
        <van-button type="info"  size="small" @tap="addExpress" >录入快递单号</van-button>
        <van-button type="info"  size="small" @tap="getRecycle" >回收站</van-button>
      </div>

      <div class="tooslbtns" v-else style="text-align: right; padding-right: 42rpx; border-bottom: 1px solid #ccc;padding-bottom: 20rpx" >
        <van-button type="info"  size="small" @tap="getPervPage" >上一页</van-button>
        <van-button type="info"  size="small" @tap="getNextPage" >下一页</van-button>


        <van-button type="danger"  size="small" @tap="deleteOrder" >删除</van-button>
        <van-button type="primary"  size="small" @tap="editState(1)" >改已发</van-button>
        <van-button plain  type="primary"  size="small" @tap="editState(0)" >改未发</van-button>
      </div>


      <view style='width: 100%;  height: 1rpx' />
      <i-row class="header-row">
        <i-col v-if="!isToolsShow" span ="3" i-class="col-class ">

          <van-checkbox-group :value="valueAll" @change="groupclickAll">
            <i-col-group  class="cbox">
              <i-col>
                <van-checkbox  name="all"/>
              </i-col>
            </i-col-group>
          </van-checkbox-group>




        </i-col>
        <i-col :span="spantools" i-class="col-class">
          <view class="table_parent">代理</view>
        </i-col>
        <i-col :span="spantools" i-class="col-class">
        <view class="table_parent">时间</view>
      </i-col>
        <i-col :span="spantools" i-class="col-class">
          <view class="table_parent">状态</view>
        </i-col>
        <i-col :span="spantools" i-class="col-class">
          <view class="table_parent"></view>
        </i-col>

      </i-row>
      <view class="block-order" style='width: 100%;  height: 1rpx;' />
      <block   v-for="(item, index) in orderlist" :key="index" >

        <i-row class="row-order" @tap="goInfo(item._id)">

          <i-col  v-if="!isToolsShow" span ="3" i-class="col-class">

            <van-checkbox-group :value="values" @change="groupclick">
              <i-col-group  class="cbox">
                <i-col
                  clickable
                  :key="index"
                  @tap.stop="toggle"
                  :data-name="item._id"
                >
                  <van-checkbox :name="item._id"/>
                </i-col>
              </i-col-group>
            </van-checkbox-group>

          </i-col>

          <i-col :span="spantools" i-class="col-class">
            <view class="table_parent">{{item.username}}</view>
          </i-col>
          <i-col :span="spantools" i-class="col-class">
          <view class="table_parent">{{item.addtime}}</view>
        </i-col>
          <i-col :span="spantools" i-class="col-class">
            <view class="table_parent">{{item.state}}</view>
          </i-col>
          <i-col :span="spantools" i-class="col-class">
            <view class="table_parent">{{item.guopin}}-{{item.guige}}</view>
          </i-col>
        </i-row>
      </block>
    </view>




  </div>
</template>

<script>

  import Notify from '../../../static/vant/notify/notify';
  import Dialog from '../../../static/vant/dialog/dialog';
  import Toast from  '../../../static/vant/toast/toast';
  import * as dayjs from 'dayjs'
  import 'dayjs/locale/zh-cn' // import locale
  import {orderListText,orderAllEdit,orderAllDel} from '../../api/basisMG'


  export default {
    data () {
      return {
        showPerv:false,
        showNext:true,
        page:{
          now:0,
          parv:"",
          next:""
        },
        addExpressshowBtn:true,
        addExpressshowSpan:0,
        spantools:6,
        isToolsShow:true,
        orderlist:[],
        chosenContactId: null,
        editingContact: {},
        showList: false,
        showEdit: false,
        isEdit: false,
        list: [{
          name: '张三',
          tel: '13000000000',
          id: 0
        }],
        values:[],
        valuesAllid:[],
        valueAll:[],
        addExpressshow:false

      }
    },
    beforeMount(){
      wx.getUserInfo({
        success:(data)=>{
        }
      })



    },


    onShow() {
      this.rowdata(this.page.now)
      this.isToolsShow = true
    },

    mounted() {
    },
    methods: {


      getRecycle(){
        wx.navigateTo({
          url: "/pages/manageOrder_recycle/main"
        })
      },
      //修改状态
      editState(val){
        let t = this
        let message = '确定修改状态为未发货'
        if(val){
          message = '确定修改状态为已发货'
        }
        Dialog.confirm({
          message:message
        }).then(() => {


          orderAllEdit({"$set":{state:val},"_idlist":t.values}).then(res => {
            Dialog.alert({
              message: '修改订单成功！'
            }).then(() => {
              t.rowdata()
            });
          })

        });
      },




      ExpressFieldtap(){
        console.log(111)
      },
      ExpressFieldonChange(){

      },
      addExpress(){
        wx.navigateTo({
          url: "/pages/manageOrder_Express/main"
        })
      },
      deleteOrder(){

        let t = this
        Dialog.confirm({
          message: '确定是否删除所选订单？删除后将无法恢复'
        }).then(() => {
          orderAllDel({"_idlist":t.values}).then(res => {
            Dialog.alert({
              message: '删除订单成功！'
            }).then(() => {
              t.rowdata()
            });
          })

      })
      },



      groupclickAll(event){
        let val = event.mp.detail

        if(this.valueAll.length){
          this.valueAll = []
          this.values = []
        }else{
          this.valueAll = ["all"]
          this.values = this.valuesAllid
        }
      },
      toggle(event){
        let val
        if(typeof event=="object"){
          val = event.mp.currentTarget.dataset.name
        }else{
          val = event
        }
        let index = this.values.indexOf(val)
        if (index <= -1) {
          this.values.push(val)
        } else {
          this.values.splice(index, 1)
        }
        console.log(2)
        console.log(this.values)
      },
      groupclick (event) {
        //this.selectValues = event.mp.detail // 这句不用也可以
        console.log(1)
        console.log(event.mp.detail)
      },

      ToolsShow(){
        this.isToolsShow = false
        this.spantools =5
        // wx.navigateTo({
        //   url: "/pages/manageOrderEdit/main"
        // })

      },
      getNextPage(){
        this.page.now = this.page.now + 1
        this.rowdata(this.page.now)
      },
      getPervPage(){
        this.page.now = this.page.now - 1
        if(this.page.now <= 0 ){
          this.page.now = 0
        }
        this.rowdata(this.page.now)
      },

      rowdata(page){
        this.orderlist  = []
        let pagesize = 50
        orderListText({"page":page,"pagesize":pagesize,"query":{"deltime":null}}).then(res => {
            if(res.pages){
              this.orderlist = res.data
            }
            if(res.pages<pagesize){
              this.showNext = true
            }else{
              this.showPerv = false
            }
            if(page==0){
              this.showPerv = true
            }
          }
        )
      },


      goInfo(d){

        if(!this.isToolsShow){
          this.toggle(d)
          return false
        }
        wx.redirectTo({
          url: "/pages/manageOrder_info/main?id="+d
        })

      },

      changeUsername(data){
        this.username = data.mp.detail
      },
      changepassword(data){
        this.password = data.mp.detail
      },
      getUserInfo(data){
        if(data.mp.detail.rawData){
          wx.getUserInfo({
            success:(data)=>{
              this.userInfo = data.userInfo
            }
          })
        }
      },
      bindViewTap () {
        const url = '../logs/main'
        if (mpvuePlatform === 'wx') {
          mpvue.switchTab({ url })
        } else {
          mpvue.navigateTo({ url })
        }
      },
      clickHandle (ev) {
        console.log('clickHandle:', ev)
        // throw {message: 'custom test'}
      }
    }
  }
</script>

<style >

  .tooslbtns{
    position: fixed;
    top:-1rpx;
    right: 10rpx;
    width:100%;
    background: #fff;
    padding-top: 6rpx;

  }
  ._van-field{
    background: red;
  }

  .cbox .van-col{
    margin:28rpx;
  }

  .tooslbtns .van-button--small{
    margin: 0 5rpx;
  }

  .block-order{
    margin-top: 165rpx;
  }

  .header-row{
    position: fixed;
    width: 100%;
    line-height: 2;
    margin-top: -1rpx;
    border-bottom: 1rpx solid #ccc;
    top:82rpx;
    background: #fff;
  }


  .row-order{
    line-height: 2;
  }

  .row-order .van-row{
    border-bottom: 1rpx solid #eee;
  }

  page {
    background-color: #fff;
  }

  .table_parent {
    display:flex;
    justify-content:center;
    align-items:center;
    background: white;
    font-size:30rpx;
    text-align:center;
    box-sizing:border-box;
    color:#595a5e;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
  }
  .table {
    border: 1px solid #dadada;
    border-right: 0;
    border-bottom: 0;
    width: 98%;
  }

  .tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .th, .td {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    width: 100%;
  }

  .th {
    font-weight: 400;
    background-color: #dadada;
  }

</style>
